<!DOCTYPE html>
<html>

<head>
	<title>PhotoPoint</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	
	<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css">
	<link href="css/styles.css" type="text/css" rel="stylesheet" />
	<script src="js/jquery-1.10.2.min.js"></script>
	<script src="js/jquery.mobile-1.3.2.min.js"></script>
	
	
</head>


<body>

<div data-role="page">

	<!-- 	PANEL -->
	<div data-role="panel" id="category_panel" data-position="left" data-display="overlay" data-theme="a">
		 <!-- panel content goes here -->
		 <ul data-role="listview" data-theme="a">
			<li><a href="#">旅游</a></li>
			<li><a href="#">聚会</a></li>
			<li><a href="#">生活</a></li>
			<li><a href="#my-header" data-rel="close">Close</a></li>
		 </ul>
		
	</div><!-- /panel -->
	
	<div data-role="panel" id="option_panel" data-position="right" data-display="push" data-theme="a">
		 <!-- panel content goes here -->
		 		 <!-- panel content goes here -->
		 <ul data-role="listview" data-theme="a">
			<li><a href="#" data-icon="gear" class="ui-btn-right">添加到浏览器书签</a></li>
			<li><a href="#" data-icon="gear" class="ui-btn-right">分享</a></li>
			<li><a href="#" data-icon="gear" class="ui-btn-right">关于</a></li>
			<li><a href="#my-header" data-rel="close">Close</a></li>
		 </ul>
		 
	</div><!-- /panel -->
	
	
	<!-- 	HEADER -->
	<div id="header" data-role="header">
		<a href="#category_panel" data-icon="bars">分类</a>
		<!-- height="30" -->
		<h1><img src="img/logo.jpg"  height="20";></h1>
		
		<a href="#option_panel" data-icon="gear" class="ui-btn-right">Options</a>
	</div><!-- /header -->
	
	<!-- 	PAGE content -->
	<div data-role="content">
	
		<div id="MainContent">
		
			<ul id="Flolder" class="folder">
				<li>
					<a href="page_example.html">
						<img src="images/thumb/001.jpg" alt="Image 001" />
						<p>帝国大厦</p>
					</a>
				</li>
				<li>
					<a href="page_example.html">
						<img src="images/thumb/002.jpg" alt="Image 002" />
						<p>下雪的火车站</p>
					</a>
				</li>
				<li>
					<a href="page_example.html">
						<img src="images/thumb/003.jpg" alt="Image 003" />
						<p>ここはどこだ？</p>
					</a>
				</li>
				<li>
					<a href="page_example.html">
						<img src="images/thumb/004.jpg" alt="Image 004" />
						<p>station?</p>
					</a>
				</li>
				<li>
					<a href="page_example.html">
						<img src="images/thumb/005.jpg" alt="Image 005" />
						<p>An automobile, autocar, motor car or car is a wheeled motor vehicle.</p>
					</a>
				</li>
				<li>
					<a href="page_example.html">
						<img src="images/thumb/006.jpg" alt="Image 006" />
						<p>what's this ?</p>
					</a>
				</li>
				<li>
					<a href="page_example.html">
						<img src="images/thumb/007.jpg" alt="Image 007" />
						<p>这好像是个桥</p>
					</a>
				</li>
				<li>
					<a href="page_example.html">
						<img src="images/thumb/008.jpg" alt="Image 008" />
						<p>这个出租车</p>
					</a>
				</li>
				<li>
					<a href="page_example.html">
						<img src="images/thumb/009.jpg" alt="Image 009" />
						<p>blue sky</p>
					</a>
				</li>
			</ul>
			
		</div>	
	
	</div><!-- /content -->

	<!-- 	FOOTER -->
	<div data-role="footer">
		<h4>Copyright 2013 PhotoPoint</h4>
	</div><!-- /footer -->
	
</div><!-- /page -->

</body>
</html>